<!-- 航道情况 -->
<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  getSearchConditionByChannel,
  getSearchByWaterwayName,
} from "../../utils/apis";
import TabItem from "./components/tabItem.vue";

const route = useRoute();
const router = useRouter();
const currentActive = ref(0);
// tab标签title
const tabHead = ref([
  { name: "基本信息", id: 1 },
  { name: "巡检情况", id: 2 },
  { name: "水位净高", id: 3 },
  { name: "通航情况", id: 4 },
  { name: "关联桥梁", id: 5 },
]);
const searChval = ref("");
const echoVal = ref(""); //回显在顶部的桥梁名
const showChoose = ref(false);
const searchResultList = ref([]);
const isShowBottomBox = ref(true);
const showTabItem = ref(false);
const onSearch = (val) => {
  showTabItem.value = false;
  if (val != "" && val != null && val != undefined) {
    getSearchByWaterwayName(val).then((res) => {
      searchResultList.value = res.data;
      if (searchResultList.value == "" || searchResultList.length == 0) {
        // 没数据
        showTabItem.value = false;
      } else {
        // 有数据就隐藏底部选项
        isShowBottomBox.value = false;
      }
    });
  }
};
const closeChooseBtn = () => {
  showChoose.value = false;
};
// 航道数据
let listLeft = ref([]);
let listRight = ref([]);
// 确定搜索的桥梁code以及名字
const confrimCode = ref("");
const confrimName = ref("");
const currentLCode = ref();
const currentRCode = ref();
const updateLeft = (item) => {
  currentLCode.value = item.code;
  currentRCode.value = "";
  listRight.value = [];
  confrimCode.value = item.code;
  confrimName.value = item.name;
  if (item.children != 0) {
    listRight.value = item.children;
  }
};
const updateRight = (childItem) => {
  currentRCode.value = childItem.code;
  confrimCode.value = childItem.code;
  confrimName.value = childItem.name;
  // 搜索框回显
  echoVal.value = childItem.name;
  // 传给子组件
  itemId.value = childItem.code;
  // 显示数据
  showTabItem.value = true;
  // 弹出窗关闭
  closeChooseBtn();
};
// 航道数据
const getSearchConditionByChannelFn = () => {
  getSearchConditionByChannel().then((res) => {
    listLeft = res.data.ListData[0].children;
    // 进页面就展示选项
    showChoose.value = true;
  });
};
// 传给tabItem的航道
const itemDetail = ref("");
const itemId = ref("");
// 对应航道的详细信息
const goToItemDetail = (item) => {
  // 清空搜索框中的文字
  searChval.value = ref("");
  // 回显顶部文字
  echoVal.value = item.waterwayName;
  itemId.value = item.id;
  // 点击后展示tabItem
  showTabItem.value = true;
  searchResultList.value = [];
  // 弹出窗关闭
  closeChooseBtn();
};
const showChooseFn = () => {
  // 清空数据
  searChval.value = "";
  echoVal.value = ""; //回显在顶部的桥梁名
  showTabItem.value = false;
  // 展示选项
  showChoose.value = true;
  // 重新打开时,清空上次选中的
  currentLCode.value = "";
  currentRCode.value = "";
  listRight.value = [];
};
onMounted(() => {
  getSearchConditionByChannelFn();
});
</script>

<template>
  <div class="main">
    <!-- 搜索框 -->
    <div class="search">
      <van-search
        v-model="echoVal"
        show-action
        autocomplete="off"
        readonly
        @click-input="showChooseFn"
        placeholder="输入关键词搜索"
      >
        <template #action>
          <div class="searchBtnBox">
            <span class="line"></span>
            <span class="searchBtn">搜索</span>
          </div>
        </template>
      </van-search>
    </div>
    <!-- 没数据页面 -->
    <div class="noMessage" v-if="!showTabItem">
      <div class="top">
        <img src="../../static/images/Slice28.png" alt="" />
      </div>
      <div class="bottom">暂无数据</div>
      <van-overlay :show="show" @click="showTabItem" />
    </div>
    <!-- 有数据页面 -->
    <div class="message" v-if="showTabItem">
      <div class="tabItem">
        <van-tabs
          v-model:active="currentActive"
          :swipe-threshold="4"
          title-active-color="#266FE8"
          title-inactive-color="rgba(0,0,0,0.9)"
        >
          <van-tab
            v-for="item in tabHead"
            :title="item.name"
            :key="item.id"
            :title-style="{ fontWeight: '500', fontSize: '16px' }"
          >
            <TabItem :id="item.id" :itemId="itemId"></TabItem>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 点击搜索框时,弹出桥梁选项 -->
    <van-popup
      v-model:show="showChoose"
      round
      position="bottom"
      :style="{ height: '60%' }"
      @click-close-icon="closeChooseBtn"
      :overlay="true"
      :closeable="true"
      :overlay-style="true"
    >
      <div class="select">
        <div class="top">
          <div class="title">搜索和选择</div>
        </div>
        <div class="searchInner">
          <van-search
            v-model="searChval"
            show-action
            autocomplete="off"
            placeholder="输入桥梁名称"
          >
            <template #action>
              <div @click="onSearch(searChval)" class="searchBtnBox">
                <span class="line"></span>
                <span class="searchBtn">搜索</span>
              </div>
            </template>
          </van-search>
          <!-- 搜索结果 -->
          <div
            class="searchResult"
            v-show="searchResultList && searchResultList.length != 0"
          >
            <div class="removeScroll">
              <div
                class="item"
                v-for="item in searchResultList"
                :key="item.id"
                @click="goToItemDetail(item)"
              >
                {{ item.waterwayName }}
              </div>
            </div>
          </div>
        </div>
        <div class="bottomBox" v-show="isShowBottomBox">
          <div class="bottom">
            <div class="leftBox">
              <div class="left" v-show="listLeft && listLeft.length != 0">
                <li
                  v-for="item in listLeft"
                  :key="item.code"
                  :class="currentLCode == item.code ? 'active' : ''"
                  @click="updateLeft(item)"
                  class="out"
                >
                  {{ item.name }}
                </li>
                <li></li>
              </div>
            </div>
            <div class="rightBox">
              <div class="right" v-show="listRight && listRight.length != 0">
                <li
                  v-for="el in listRight"
                  :key="el.code"
                  :class="currentRCode == el.code ? 'active' : ''"
                  @click="updateRight(el)"
                >
                  {{ el.name }}
                </li>
                <li></li>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 搜索出数据时 -->
  </div>
</template>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  overflow-y: auto;
  .search,
  .searchInner {
    padding-right: 16px;
    background: #ffffff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.09);
    position: relative;
    .line {
      width: 1px;
      height: 20px;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
    .searchBtn {
      margin-left: 16px;
      margin-right: 8px;
      width: 32px;
      height: 22px;
      font-size: 16px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.6);
      line-height: 19px;
    }
  }

  // 没数据
  .noMessage {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .top {
      margin-top: 134px;
    }
    .bottom {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6);
    }
  }
  // 有数据
  .message {
    flex: 1;
    .tabItem {
      position: relative;
      ::v-deep .van-tabs__line {
        width: 64px;
        height: 2px;
        background: #276fe8;
      }
      ::v-deep .van-tabs--line .van-tabs__wrap {
        position: relative;
        height: 52px;
      }
      ::v-deep .van-tabs--line .van-tabs__wrap::after {
        content: "";
        width: 343px;
        height: 1px;
        background: rgba(0, 0, 0, 0.1);
        bottom: 0;
        left: 16px;
        position: absolute;
      }
    }
  }
}

// vantpopup中的盒子
.select {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  .top {
    position: relative;
    height: 72px;
    .title {
      position: absolute;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      -ms-transform: translateX(-50%); /* IE 9 */
      -moz-transform: translateX(-50%); /* Firefox */
      -webkit-transform: translateX(-50%); /* Safari 和 Chrome */
      -o-transform: translateX(-50%); /* Opera */
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
    }
  }
  .bottomBox {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin-top: 16px;
    padding-bottom: 2rem;
    .bottom::before {
      content: "";
      height: 1px;
      position: absolute;
      background: rgba(0, 0, 0, 0.1);
      left: 16px;
      width: calc(100% - 32px);
    }
    .bottom {
      background-color: #fff;
      display: flex;
      li {
        list-style: none;
        font-size: 12px;
        height: 34px;
        line-height: 34px;
        padding: 0 16px;
        position: relative;
      }
      .out {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .leftBox {
        width: 50%;
        height: 380px;
        overflow: hidden;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        .left {
          width: calc(100% + 8px);
          overflow-y: scroll;
          height: calc(100% - 68px);
        }
      }
      .rightBox {
        width: 50%;
        height: 380px;
        overflow: hidden;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        .right {
          width: calc(100% + 8px);
          overflow-y: scroll;
          height: calc(100% - 68px);
        }
      }

      .active {
        background: rgba(38, 111, 232, 0.2);
        font-size: 12px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #266fe8;
      }
      li.active::after {
        content: "";
        width: 8px;
        height: 8px;
        border: solid #276fe8;
        border-width: 0 2px 2px 0;
        transform: translate(-50%, -50%) rotate(-45deg);
        position: absolute;
        top: 50%;
        right: 4px;
      }
    }
  }
  .searchInner {
    .searchResult {
      overflow: hidden;
      height: 260px;
      width: 100%;
      .removeScroll {
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        background-color: #fff;
        position: absolute;
        top: 54px;
        left: 0;
        .item {
          font-size: 15px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.9);
          padding-top: 16px;
          padding-bottom: 12px;
          margin-left: 16px;
          position: relative;
        }
        .item::after {
          content: "";
          width: 342px;
          height: 1px;
          position: absolute;
          background: rgba(0, 0, 0, 0.06);
          top: 50px;
          left: 0;
        }
      }
    }
  }
}
// 搜索样式修改
::v-deep .van-search__content {
  background: #f5f5f5;
  border-radius: 6px 0 0 6px;
}
::v-deep .van-search__action {
  background: #f5f5f5;
  border-radius: 0 6px 6px 0;
}
</style>